<template>
  <div class="student-manager">
    <!-- 主页面内容 -->
    <div class="header">
      <!-- <a-input-search
          v-model:value="searchText"
          placeholder="输入姓名或学校搜索"
          style="width: 300px"
          @search="handleSearch"
        />
        <a-button type="primary" @click="showModal = true">
          <template #icon><plus-outlined /></template>
          新增学生
        </a-button> -->
    </div>

    <!-- 数据表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :pagination="pagination"
      row-key="id"
      bordered
    >
      <template #action="{ record }">
        <a-button type="link" @click="editUser(record)">编辑</a-button>
      </template>
      <!-- 表格内容省略，与之前相同 -->
    </a-table>

    <!-- 自定义弹窗 -->
    <div v-if="showModal" class="custom-modal">
      <div class="modal-mask" @click="handleCancel"></div>
      <div class="modal-container">
        <div class="modal-header">
          <h3>{{ modalType === "add" ? "编辑学生信息" : "编辑学生信息" }}</h3>
          <close-outlined class="close-icon" @click="handleCancel" />
        </div>

        <div class="modal-body">
          <a-form
            ref="formRef"
            :model="formState"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 18 }"
            :rules="rules"
          >
            <a-form-item label="姓名" name="name">
              <a-input
                v-model:value="formState.userName"
                placeholder="请输入学生姓名"
              />
            </a-form-item>

            <a-form-item label="性别" name="gender">
              <a-radio-group v-model:value="formState.sex">
                <a-radio :value="1">男</a-radio>
                <a-radio :value="2">女</a-radio>
              </a-radio-group>
            </a-form-item>

            <a-form-item label="年龄" name="age">
              <a-input-number
                v-model:value="formState.age"
                placeholder="请输入年龄"
                :min="6"
                :max="90"
                style="width: 100%"
              />
            </a-form-item>

            <a-form-item label="出生日期" name="birthDay">
              <a-date-picker
                placeholder="请选择出生日期"
                v-model:value="formState.birthDay"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </a-form-item>

            <a-form-item label="学校" name="school">
              <a-input
                v-model:value="formState.school"
                placeholder="请输入学校"
              />
            </a-form-item>

            <!-- <a-form-item label="年级" name="grade">
                <a-input v-model:value="formState.name" placeholder="请输入年级" />
              </a-form-item> -->

            <a-form-item label="班级">
              <a-input
                v-model:value="formState.classroom"
                placeholder="请输入班级"
              />
            </a-form-item>
          </a-form>
        </div>

        <div class="modal-footer">
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleOk" :loading="confirmLoading"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { earlyWarning, histogram, selectUserList,updateUser } from "@/api/Login";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import dayjs from "dayjs";

// 数据定义（与之前相同）
const columns = [

{
    title: "账号",
    dataIndex: "accountNumber",
    key: "accountNumber",
  },
  {
    title: "用户名",
    dataIndex: "userName",
    key: "userName",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "班级",
    dataIndex: "classroom",
    key: "classroom",
  },
  {
    title: "学校",
    dataIndex: "school",
    key: "school",
  },
  {
    title: "出生年月",
    dataIndex: "birthDay",
    key: "birthDay",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
  // 列定义省略，与之前相同
];

const genderMap = { 1: "男", 2: "女" };

const schoolOptions = [
  { value: "school1", label: "第一实验小学" },
  // 其他学校选项省略
];

const gradeOptions = [
  { value: "grade1", label: "一年级" },
  // 其他年级选项省略
];
const formState = ref({
  id: null,
  name: "",
  gender: 1,
  age: null,
  birthDate: null,
  school: null,
  grade: null,
  class: "",
});
const editUser = (val) => {
  showModal.value = true;
  formState.value = { ...val };
  console.log(val);
};
const pagination = reactive({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50"],
  showTotal: (total) => `共 ${total} 条数据`,
});

const rules = {
  // 验证规则省略，与之前相同
};

// 响应式数据
const dataSource = ref([]);
const searchText = ref("");
const showModal = ref(false);
const modalType = ref("add");
const confirmLoading = ref(false);
const formRef = ref();

// 计算属性
const filteredData = ref([
  { username: "", age: 0, class: "", school: "", birthdate: null },
]);

// 方法
const formatDate = (date) => {
  return dayjs(date).format("YYYY-MM-DD");
};

const calculateAge = (birthDate) => {
  if (!birthDate) return null;
  return dayjs().diff(dayjs(birthDate), "year");
};

const initData = () => {
  // 初始化数据逻辑省略，与之前相同
  selectUserList().then((res) => {
    filteredData.value = res.data;
  });
};

const handleSearch = () => {
  pagination.current = 1;
};

const handleOk = async () => {
  updateUser(formState.value).then((res) => {
    if (res.code == 200) {
      showModal.value = false
      message.warning("修改成功"); 
      initData();
    }
  });
};

const handleCancel = () => {
  formRef.value.resetFields();
  showModal.value = false;
};

const handleDelete = (id) => {
  // 删除逻辑省略，与之前相同
};

onMounted(() => {
  initData();
});
</script>

<style scoped>
.student-manager {
  padding: 20px;
  position: relative;
}

.header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 自定义弹窗样式 */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.modal-container {
  position: relative;
  width: 700px;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.close-icon {
  font-size: 16px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.45);
}

.close-icon:hover {
  color: rgba(0, 0, 0, 0.75);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
}

.modal-footer button {
  margin-left: 8px;
}
</style>
